<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选项卡</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				
			}
			#box{
				width: 240px;
				height: 240px;
				margin: 50px auto;	
				border: 1px solid #CCCCCC;
				text-align: center;
			}
			#box > div{
				display: none;
				margin-top: 50px;
			}
			input{
				border: 0;
				border: 1px solid #666666;
				font-size: 16px;
				padding: 5px 10px;
			}
			.active{
				background: red;
				color: white;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<input class="active" type="button" value="内容1" />
			<input type="button" value="内容2" />
			<input type="button" value="内容3" />
			<!--<div class="pics">-->
				<div>1111111</div>
				<div>2222222</div>
				<div>3333333</div>
			<!--</div>-->
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
            new TabSwitch('box');
        };

        function TabSwitch(id) {
            //将属性挂到this
            var _this = this;//注意this的改变
            var box = document.getElementById(id);
            this.inp=box.getElementsByTagName('input');
            this.div=box.getElementsByTagName('div');
            
			//循环input,添加事件
            for(var i = 0; i < this.inp.length; i++) {
                this.inp[i].index = i;
                this.inp[i].onclick = function() {
                    _this.fnClick(this);
                };
            }
        };
        //函数不嵌套，方法写入原型
        TabSwitch.prototype.fnClick = function(fn) {
            for(var i = 0; i < this.inp.length; i++) {
                this.inp[i].className = ''
                this.div[i].style.display = 'none';
            }
            fn.className = 'active';
            this.div[fn.index].style.display = 'block';
        }
	</script>
</html>
